<template>
	<view class="page solid-top padding-lr">
		<view class="flex padding-tb solid-bottom" @click="navToDetail">
			<view class="fu-block-200 margin-right-sm">
				<fu-image radius="16" :src="goodsInfo.goods_thumb" mode="aspectFill"></fu-image>
			</view>
			<view class="flex-sub flex flex-direction justify-between" style="min-width: 1px;">
				<view class="">
					<view class="text-df text-cut-2 text-333 text-weight-500">{{ goodsInfo.goods_name }}</view>
					<view v-if="goodsInfo.key_name" class="text-sm text-cut margin-top-8 text-999 text-weight-400">
						{{ goodsInfo.key_name }}
					</view>
					<!-- <view  class="text-sm text-cut margin-top-8 text-999 text-weight-400">提亮，抗初老</view> -->
				</view>
				<view class="flex justify-between">
					<text class="text-sm">
						<!-- <text class="text-999 margin-right-xs">{{ i18n['实际支付'] }}:</text> -->
						<text class="text-red">会员价</text>
						<text class="text-bold text-lg text-price text-red">{{ goodsInfo.shop_price }}</text>
					</text>
					<text class="text-sm margin-left">
						<!-- <text class="text-999 margin-right-xs">{{ i18n['申请数量'] }}:</text> -->
						<text class="text-weight-400 text-999">x{{ goodsInfo.num }}</text>
					</text>
				</view>
			</view>
		</view>
		<view class="text-vecode margin-top">
			{{i18n['为了给您更优的退换货时效和体验，我公司建议优先选择协作快递韵达。']}}
		</view>
		<view class="margin-top-xs">
			<view class="padding-tb solid-bottom flex justify-between align-center text-lg">
				<view class="text-333">{{i18n['物流公司']}}</view>
				<view class="text-999" @click="chooseLogistics">
					<text class="margin-right-sm">{{company.name?company.name:i18n['请选择']}}</text>
					<text class="cuIcon-right"></text>
				</view>
			</view>
			<view class="padding-tb solid-bottom flex justify-between align-center text-lg text-weight-400">
				<view class="text-333">{{i18n['物流单号']}}</view>
				<view class="text-999">
					<input type="text" :placeholder="i18n['请填写物流单号']" v-model="express_no" placeholder-class="text-bf"
						class="text-right">
				</view>
			</view>
			<view class="padding-tb solid-bottom flex justify-between align-center text-lg text-weight-400">
				<view class="text-333">
					{{i18n['联系电话']}}
				</view>
				<view class="text-999">
					<input type="number" maxlength="11" :placeholder="i18n['请填写联系电话']" v-model="mobile"
						placeholder-class="text-bf" class="text-right">
				</view>
			</view>
			<view class="padding-tb solid-bottom flex justify-between align-center text-lg text-weight-400">
				<view class="text-333 margin-right-sm">
					{{i18n['退换说明']}}
				</view>
				<view class="text-999 flex-sub" style="min-width: 1px;">
					<input type="text" :placeholder="i18n['请输入(选填)']" v-model="remark" placeholder-class="text-bf"
						class="text-right">
				</view>
			</view>
		</view>
		<view class="margin-top">
			<fu-upload col="4" max="3" @change="handleImageUpload"></fu-upload>
		</view>
		<view :loading="is_click"
			class="action-btn margin-lr height-88 line-height-88 text-center bg-theme text-white fu-fs32 round"
			@click="handleSubmit">{{i18n['提交']}}</view>
		<fu-notwork></fu-notwork>
	</view>
</template>

<script>
	import {
		UploadImage
	} from '@/common/utils/index';
	import FuUpload from '../../components/fu-upload/fu-upload.vue';
	export default {
		components: {
			FuUpload
		},
		data() {
			return {
				id: null,
				express_no: '',
				is_click: false,
				goodsInfo: {},
				img: [],
				remark: '', //退换说明
				company: {
					name: ''
				},
				mobile: '',
				itemIndex: '', // 列表索引
			};
		},
		onLoad(options) {
			this.setNavigationBarTitle(this.i18n['填写寄回信息'])
			const {
				id,
				itemIndex
			} = options;
			this.id = id;
			this.itemIndex = itemIndex;
			this.getDetail();
			uni.$on('company', data => {
				this.company = data;
			})
		},
		onUnload() {
			uni.$off('company');
		},
		methods: {
			/**
			 * @description 获取售后详情
			 */
			getDetail() {
				this.$api
					.post(global.apiUrls.getGoodsAfterSaleDetaile, {
						id: this.id
					})
					.then(res => {
						if (res.data.code == 1) {
							this.goodsInfo = res.data.data;
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			// 去物流
			chooseLogistics() {
				uni.navigateTo({
					url: '/pages/order/afterorder/afterorder-logistics/index'
				})
			},
			handleImageUpload(e) {
				this.img = e;
			},
			// 提交
			handleSubmit() {
				if (this.is_click) return
				let that = this;
				if (!that.id) return that.$message.info(this.i18n['物流单号不能为空']);
				if (!that.company.aid) return that.$message.info(this.i18n['请选择物流公司']);
				// || !/^[0-9a-zA-Z]*$/g.test(that.express_no)
				// if (!that.express_no) return that.$message.info(this.i18n['无效的物流单号']);
				if (!that.express_no) return that.$message.info('请填写物流单号');
				if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.mobile)) {
					let text = !that.mobile ? '请填写联系电话': this.i18n['手机号格式不正确'];
					that.$message.info(text);
					return false;
				}
				// if (!that.mobile) return that.$message.info(this.i18n['请输入电话号码']);

				let data = {
					id: that.id,
					express_no: that.express_no,
					express_company_id: that.company.aid,
					mobile: that.mobile,
					remark: that.remark,
					img: this.img.join(',')
				}
				that.is_click = true;
				that.$api.post(global.apiUrls.getGoodsAfterlog, data)
					.then(res => {
						console.log(res.data, 'getGoodsAfterlog')
						if (res.data.code == 1) {
							that.$message.info('物流信息已提交售后,等待商家审核');
							uni.$emit('onRefundOrederDetailPageUpdata');
							uni.$emit('onPageUpdata', {
								type: 6, // 1: 取消订单， 2: 提醒发货， 3: 确认订单， 4: 删除订单， 7: 删除售后订单
								index: that.itemIndex,
							})
							uni.$emit('onOrederDetailPageUpdata');
							setTimeout(()=>{
								uni.navigateBack({
									delta: 1
								})
							}, 800)
						} else {
							that.is_click = false;
							that.$message.info(res.data.msg);
						}
				
					})
					.catch(err => {
						console.log(err)
					})
				// that.$util.debounce(() => {
				// 	that.$api.post(global.apiUrls.getGoodsAfterlog, data)
				// 		.then(res => {
				// 			if (res.data.code == 1) {
				// 				that.$message.info(that.i18n['物流信息已提交售后,等待商家审核'])
				// 				uni.$emit('onRefundOrederDetailPageUpdata');
				// 				uni.$emit('onPageUpdata', {
				// 					type: 6, // 1: 取消订单， 2: 提醒发货， 3: 确认订单， 4: 删除订单， 7: 删除售后订单
				// 					index: that.itemIndex,
				// 				})
				// 				uni.$emit('onOrederDetailPageUpdata');
				// 				setTimeout(function() {
				// 					uni.navigateBack();
				// 				}, 800)
				// 			} else {
				// 				that.is_click = false;
				// 				that.$message.info(res.msg);
				// 			}

				// 		})
				// 		.catch(err => {
				// 			console.log(err)
				// 		})
				// }, 1000, true)
			},
		}

	}
</script>

<style lang="scss" scoped>
	.page {
		background: #FFFFFF;
		min-height: 100vh;

		.action-btn {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 50rpx;
			bottom: calc(50rpx + constant(safe-area-inset-bottom));
			bottom: calc(50rpx + env(safe-area-inset-bottom));
		}
	}
</style>
